<template>
    <div class="box">
      <p class="title">{{ title }}</p>
      <div class="list" v-for="item in listArr" :key="item.id">
        <p>{{ item.list }}：</p>
        <p>
          {{ (item.listValue = "" ? '' : item.listValue) }}
        </p>
      </div>
    </div>
  </template>
  
  <script setup>
  defineProps({
    title: {
      type: String,
      default: "联系人详情"
    },
    listArr: {
      type: Array,
      default: [
        {
          list: "取货人",
          id: 1,
          listValue: "OMNI.BASS"
        },
        {
          list: "联系电话",
          id: 2,
          listValue: "123456"
        },
        {
          list: "备注",
          id: 3,
          listValue: "需要包装盒，谢谢！"
        }
      ]
    }
  });
  </script>
  
  <style scoped>
  .box {
    padding: 2.667vw;
    margin: 5vw;
    background: white;
    border-radius: 2.667vw;
  }
  
  .title {
    font-weight: bold;
    border-left: 1vw solid red;
    padding-left: 4vw;
    margin-left: 2vw;
  
  
  }
  
  .list {
    display: flex;
    margin: 5.333vw 0;
  }
  
  .list>p:nth-child(1) {
    width: 26.667vw;
    text-align: right;
    margin-right: 5.333vw;
    font-weight: bold;
    font-size: 4vw;
  }
  
  .list>p:nth-child(2) {
    flex: 1;
    font-size: 3.467vw;
  }
  
  </style>